<template>
  <div class="panel-container">
    <!-- 左侧：1#给煤机 -->
    <div class="panel-side">
      <h2 class="panel-title">1#给煤机</h2>
      <div class="tech-panel">
        <!-- 原有内容（略去，只粘贴了一部分） -->
        <section class="section status-section">
          <div class="status-left">
            <div class="status-item">
              ⚙️ 通讯状态：
              <span :class="['status-value', getCommStatusClass]">{{
                act.PD_22N.communication_status == 1 ? "运行" : "停止"
              }}</span>
            </div>
            <div class="status-item">
              ⚙️ 运行状态：
              <span :class="['status-value', getRunStatusClass1]">{{
                act.PD_22N.PD_22_N_GEN.Home22NStatusRUNSts_DI == true
                  ? "运行"
                  : "停止"
              }}</span>
            </div>
          </div>
          <div class="status-right">
            <div class="status-line">
              频率显示：<span class="value">{{ multiSpeedDisplay1 }} HZ</span>
            </div>
            <div class="status-line">
              转速给定：
              <input
                type="number"
                v-model.number="multiSpeedInputTemp1"
                class="input"
                min="0"
                step="1"
                @input="showConfirmDialog1 = true"
              />
              <span class="unit"> 级</span>
            </div>
          </div>
        </section>

        <!-- 华宁控制方式 -->
        <section class="section mode-section">
          <div class="mode-buttons">
            <div
              v-for="item in ['工频故障', '变频故障', '远程状态', '堆煤保护', '工频运行','变频运行']"
              :key="item"
              :class="[
                'mode-btn',
                huaningControlStatus1[item] ? 'active' : 'inactive',
              ]"
            >
              {{ item }}
            </div>
          </div>
        </section>

        <!-- 联锁控制状态 -->
        <section class="section lock-switch-section">
          <div class="lock-switch-left">
            <div class="lock-item">
              当前状态：
              <span
                :class="['status-dot', lockStatus === 0 ? 'grey' : 'green']"
              ></span>
              <span class="lock-text">{{
                lockStatus === 0 ? "解锁" : "联锁"
              }}</span>
            </div>
          </div>
          <div class="lock-switch-right">
            <button class="glow-btn small" @click="openConfirmDialog(change1, '确定切换联锁/解锁状态设备？')">
              {{ lockStatus === 0 ? "切换至联锁" : "切换至解锁" }}
            </button>
          </div>
        </section>

        <!-- 操作按钮 -->
        <section class="section button-section">
          <button
            class="glow-btn"
            @click="openConfirmDialog(start1, '确定启动设备？')"
          >
            启动
          </button>
          <button
            class="glow-btn"
            @click="openConfirmDialog(stop1, '确定停止设备？')"
          >
            停止
          </button>
          <button
            class="glow-btn danger"
            @click="openConfirmDialog(reset1, '确定复位故障？')"
          >
            故障复位
          </button>
          <button
            class="glow-btn danger"
            @click="openConfirmDialog(qiechu1, '确定复位故障？')"
          >
            切除
          </button>
        </section>
      </div>
    </div>

    <!-- 右侧：2#给煤机 -->
    <div class="panel-side">
      <h2 class="panel-title">2#给煤机</h2>
      <div class="tech-panel">
        <!-- 右侧内容待填充 -->
        <section class="section status-section">
          <div class="status-left">
            <div class="status-item">
              ⚙️ 通讯状态：
              <span :class="['status-value', getCommStatusClass]">{{
                act.PD_22N.communication_status == 1 ? "运行" : "停止"
              }}</span>
            </div>
            <div class="status-item">
              ⚙️ 运行状态：
              <span :class="['status-value', getRunStatusClass2]">{{
                act.PD_22N.PD_22_N_GEN.RUNSts_DI == true
                  ? "运行"
                  : "停止"
              }}</span>
            </div>
          </div>
          <div class="status-right">
            <div class="status-line">
              频率显示：<span class="value">{{ multiSpeedDisplay2 }} HZ</span>
            </div>
            <div class="status-line">
              转速给定：
              <input
                type="number"
                v-model.number="multiSpeedInputTemp2"
                class="input"
                min="0"
                step="1"
                @input="showConfirmDialog2 = true"
              />
              <span class="unit"> 级</span>
            </div>
          </div>
        </section>

        <!-- 华宁控制方式 -->
        <section class="section mode-section">
          <div class="mode-buttons">
            <div
              v-for="item in ['工频故障', '变频故障', '远程状态', '堆煤保护', '工频运行','变频运行']"
              :key="item"
              :class="[
                'mode-btn',
                huaningControlStatus1[item] ? 'active' : 'inactive',
              ]"
            >
              {{ item }}
            </div>
          </div>
        </section>


        <!-- 联锁控制状态 -->
        <section class="section lock-switch-section">
          <div class="lock-switch-left">
            <div class="lock-item">
              当前状态：
              <span
                :class="['status-dot', lockStatus === 0 ? 'grey' : 'green']"
              ></span>
              <span class="lock-text">{{
                lockStatus === 0 ? "解锁" : "联锁"
              }}</span>
            </div>
          </div>
          <div class="lock-switch-right">
            <button class="glow-btn small" @click="openConfirmDialog(change2, '确定切换联锁/解锁状态设备？')">
              {{ lockStatus === 0 ? "切换至联锁" : "切换至解锁" }}
            </button>
          </div>
        </section>

        <!-- 操作按钮 -->
        <section class="section button-section">
          <button
            class="glow-btn"
            @click="openConfirmDialog(start2, '确定启动设备？')"
          >
            启动
          </button>
          <button
            class="glow-btn"
            @click="openConfirmDialog(stop2, '确定停止设备？')"
          >
            停止
          </button>
          <button
            class="glow-btn danger"
            @click="openConfirmDialog(reset2, '确定复位故障？')"
          >
            故障复位
          </button>
          <button
            class="glow-btn danger"
            @click="openConfirmDialog(qiechu1, '确定复位故障？')"
          >
            切除
          </button>
        </section>
      </div>
      
    </div>
    
  </div>
        <section class="section lock-switch-section">
          <div class="lock-switch-left">
            <div class="lock-item">
              料位联锁操作状态：
              <span
                :class="['status-dot', lockStatus === 0 ? 'grey' : 'green']"
              ></span>
              <span class="lock-text">{{
                lockStatus === 0 ? "解锁" : "联锁"
              }}</span>
            </div>
          </div>
          <div class="lock-switch-right">
            <button class="glow-btn small" @click="openConfirmDialog(change3, '确定切换联锁/解锁状态设备？')">
              {{ lockStatus === 0 ? "切换至联锁" : "切换至解锁" }}
            </button>
          </div>
        </section>
  <transition name="fade">
    <div v-if="showActionConfirm" class="dialog-overlay">
      <div class="dialog-box" @click.stop>
        <h3>确认操作</h3>
        <p>{{ actionDescription }}</p>
        <div class="dialog-actions">
          <button class="btn btn-confirm" @click="confirmAction">确认</button>
          <button class="btn btn-cancel" @click="cancelAction">取消</button>
        </div>
      </div>
    </div>
  </transition>
  <transition name="fade">
    <div v-if="showConfirmDialog1" class="dialog-overlay">
      <div class="dialog-box" @click.stop>
        <h3>确认修改</h3>
        <p>
          确定将速度设置为
          <strong>{{ multiSpeedInputTemp1 }}</strong> 级吗？
        </p>
        <div class="dialog-actions">
          <button class="btn btn-confirm" @click="confirmValue1">确认</button>
          <button class="btn btn-cancel" @click="cancelInput1">取消</button>
        </div>
      </div>
    </div>
  </transition>
  <transition name="fade">
    <div v-if="showConfirmDialog2" class="dialog-overlay">
      <div class="dialog-box" @click.stop>
        <h3>确认修改</h3>
        <p>
          确定将速度设置为
          <strong>{{ multiSpeedInputTemp2 }}</strong> 级吗？
        </p>
        <div class="dialog-actions">
          <button class="btn btn-confirm" @click="confirmValue2">确认</button>
          <button class="btn btn-cancel" @click="cancelInput2">取消</button>
        </div>
      </div>
    </div>
  </transition>
</template>

<script lang="ts" setup>
import { computed, ref } from "vue";
import { act, sendDataFromButton } from "../../../utils/websocket";
const lockStatus = ref<0 | 1>(0); // 0 = 解锁，1 = 联锁
//1#数值区
// 通讯状态
const getCommStatusClass = computed(() =>
  act.PD_22N.commnaction_status === true ? "green" : "red"
);
const getRunStatusClass1 = computed(() =>
  act.PD_22N.PD_22_N_GEN.RunStatus_DI === true
    ? "green"
    : "gray"
);
const multiSpeedDisplay1 = computed(() => act.speed);
const multiSpeedInput1 = computed({
  get: () => act.PD_22N.PD_22_N_GEN.BeltSpeed_AI,
  set: (val) => {
    // act.speed = Math.round(val);Home_22N_StatusArea_MultiSpeedSet_AI
    let tag = "act.PD_22_N.PD_22_N_GEN.Home_22N_StatusArea_MultiSpeedSet_AI";
    sendDataFromButton(tag, Math.round(val));
    //需要增加控制点逻辑
  },
});

const multiSpeedInputTemp1 = ref(
  act.speed
);
const showConfirmDialog1 = ref(false);
const confirmValue1 = () => {
  multiSpeedInput1.value = multiSpeedInputTemp1.value;
  showConfirmDialog1.value = false;
};
const cancelInput1 = () => {
  multiSpeedInputTemp1.value = multiSpeedInput1.value;
  showConfirmDialog1.value = false;
};

const start1 = () => {
  const tag = "act.PD_22_N.PD_22_N_GEN.Home_22N_ControlArea_Start_DI";
  sendDataFromButton(tag, true);
};
const stop1 = () => {
  const tag = "act.PD_22_N.PD_22_N_GEN.Home_22N_ControlArea_Stop_DI";
  sendDataFromButton(tag, true);
};
const reset1 = () => {
  const tag = "act.PD_22_N.PD_22_N_GEN.Home_22N_ControlArea_FaultReset_DI";
  sendDataFromButton(tag, true);
};
const qiechu1 = () => {
  const tag = "act.PD_22_N.PD_22_N_GEN.Home_22N_ControlArea_FaultReset_DI";
  sendDataFromButton(tag, true);
};

const change1 = () => {
  lockStatus.value = lockStatus.value === 0 ? 1 : 0;
};
// 控制方式状态
const huaningControlStatus1 = computed(() => ({
  变频器运行:
    act.PD_22_N.PD_22_N_GEN
      .Home_22N_HuaningControlArea_CentralizedControl_AI === 0,
  变频器故障:
    act.PD_22_N.PD_22_N_GEN
      .Home_22N_HuaningControlArea_CentralizedControl_AI === 1,
  远程状态:
    act.PD_22_N.PD_22_N_GEN
      .Home_22N_HuaningControlArea_CentralizedControl_AI === 2,
}));

//2#数值区


// 通讯状态

const getRunStatusClass2 = computed(() =>
  act.PD_22_N.PD_22_N_GEN.Home_22N_StatusArea_RunStatus_DI === true
    ? "green"
    : "gray"
);
// 数值状态

// const beltSpeed = computed(() => act.PD_22_N.PD_22_N_GEN.Home_22N_StatusArea_BeltSpeed_AI);

const multiSpeedDisplay2 = computed(() => act.speed);


const multiSpeedInput2 = computed({
  get: () => act.PD_22_N.PD_22_N_GEN.Home_22N_StatusArea_BeltSpeed_AI,
  set: (val) => {
    // act.speed = Math.round(val);Home_22N_StatusArea_MultiSpeedSet_AI
    let tag = "act.PD_22_N.PD_22_N_GEN.Home_22N_StatusArea_MultiSpeedSet_AI";
    sendDataFromButton(tag, Math.round(val));
    //需要增加控制点逻辑
  },
});
const multiSpeedInputTemp2 = ref(
  act.speed
);
const showConfirmDialog2 = ref(false);
const confirmValue2 = () => {
  multiSpeedInput2.value = multiSpeedInputTemp2.value;
  showConfirmDialog2.value = false;
};
const cancelInput2 = () => {
  multiSpeedInputTemp2.value = multiSpeedInput2.value;
  showConfirmDialog2.value = false;
};

// 控制方式状态'工频故障', '变频故障', '远程状态', '堆煤保护', '工频运行','变频运行'
const huaningControlStatus2 = computed(() => ({
  工频故障:
    act.PD_22_N.PD_22_N_GEN
      .Home_22N_HuaningControlArea_CentralizedControl_AI === 0,
  变频故障:
    act.PD_22_N.PD_22_N_GEN
      .Home_22N_HuaningControlArea_CentralizedControl_AI === 1,
  远程状态:
    act.PD_22_N.PD_22_N_GEN
      .Home_22N_HuaningControlArea_CentralizedControl_AI === 2,
  
}));


// 实际操作函数

const start2 = () => {
  const tag = "act.PD_22_N.PD_22_N_GEN.Home_22N_ControlArea_Start_DI";
  sendDataFromButton(tag, true);
};
const stop2 = () => {
  const tag = "act.PD_22_N.PD_22_N_GEN.Home_22N_ControlArea_Stop_DI";
  sendDataFromButton(tag, true);
};
const reset2 = () => {
  const tag = "act.PD_22_N.PD_22_N_GEN.Home_22N_ControlArea_FaultReset_DI";
  sendDataFromButton(tag, true);
};
const qiechu2 = () => {
  const tag = "act.PD_22_N.PD_22_N_GEN.Home_22N_ControlArea_FaultReset_DI";
  sendDataFromButton(tag, true);
};

const change2 = () => {
  lockStatus.value = lockStatus.value === 0 ? 1 : 0;
};

//公共区域
const change3 = () => {
  lockStatus.value = lockStatus.value === 0 ? 1 : 0;
};
// 通用确认弹窗逻辑
const showActionConfirm = ref(false);
const pendingAction = ref<null | (() => void)>(null);
const actionDescription = ref("");

const openConfirmDialog = (action: () => void, description: string) => {
  pendingAction.value = action;
  actionDescription.value = description;
  showActionConfirm.value = true;
};

const confirmAction = () => {
  pendingAction.value?.();
  showActionConfirm.value = false;
};
const cancelAction = () => {
  showActionConfirm.value = false;
  pendingAction.value = null;
};
</script>

<style scoped>
.tech-panel {
  display: flex;
  flex-direction: column;
  gap: 1.5em;
  padding: 2em;
  background: rgba(0, 10, 20, 0.6);
  border: 2px solid #0ff;
  border-radius: 16px;
  backdrop-filter: blur(12px);
  color: #0ff;
  font-family: "Orbitron", "Arial", sans-serif;
  box-shadow: 0 0 12px #0ff4;
}

.section {
  border: 1px solid #0ff4;
  border-radius: 12px;
  padding: 1em 1.5em;
  background: rgba(0, 20, 40, 0.3);
  box-shadow: inset 0 0 10px #0ff2;
}

/* 状态区 */
.status-section {
  display: flex;
  justify-content: space-between;
  gap: 2em;
}
.status-left {
  display: flex;
  flex-direction: column;
  gap: 0.5em;
}
.status-item {
  white-space: nowrap;
  font-weight: bold;
  font-size: 1em;
}
.status-right {
  display: flex;
  flex-direction: column;
  gap: 0.6em;
}
.status-line {
  display: flex;
  align-items: center;
  gap: 0.5em;
}
.input {
  background: transparent;
  border: 1px solid #0ff;
  color: #0ff;
  padding: 0.3em 0.5em;
  border-radius: 6px;
  width: 80px;
}
.unit {
  color: #999;
}
.status-value.green {
  color: #0f0;
}
.status-value.red {
  color: #f33;
}
.status-value.gray {
  color: #999;
}

/* 控制方式显示 */
.mode-buttons {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  justify-content: center;
  gap: 1em;
}
.mode-btn {
  padding: 0.5em 1.2em;
  border-radius: 8px;
  font-weight: bold;
  min-width: 70px;
  text-align: center;
  transition: all 0.3s;
}
.mode-btn.active {
  background-color: rgba(0, 255, 170, 0.2);
  border: 1px solid #0ff;
  color: #0ff;
}
.mode-btn.inactive {
  background-color: rgba(255, 255, 255, 0.05);
  border: 1px solid #555;
  color: #888;
}
/* 联锁切换区 */
.lock-switch-section {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 2em;
  padding: 1em 1.5em;
  border: 1px solid #0ff4;
  border-radius: 12px;
  background: rgba(0, 20, 40, 0.3);
  box-shadow: inset 0 0 10px #0ff2;
}

.lock-switch-left {
  display: flex;
  align-items: center;
  gap: 1em;
}

.lock-item {
  color: #0ff;
  font-weight: bold;
  font-size: 1em;
  white-space: nowrap;
}

.lock-text {
  margin-left: 0.5em;
}

.status-dot {
  display: inline-block;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  margin-left: 0.5em;
  box-shadow: 0 0 6px currentColor;
}

.status-dot.green {
  background-color: #0f0;
  color: #0f0;
}

.status-dot.grey {
  background-color: rgb(111, 134, 141);
  color: rgb(85, 131, 140);
}
/* 操作按钮 */
.button-section {
  display: flex;
  gap: 1em;
  justify-content: center;
}
.glow-btn {
  padding: 0.7em 1.5em;
  background: rgba(0, 255, 255, 0.1);
  border: 1px solid #0ff;
  color: #0ff;
  font-weight: bold;
  border-radius: 8px;
  cursor: pointer;
  box-shadow: 0 0 8px #0ff4;
  transition: all 0.2s;
}
.glow-btn:hover {
  background: #0ff;
  color: #000;
  box-shadow: 0 0 16px #0ff;
}
.glow-btn.danger {
  border-color: #f00;
  color: #f00;
}
.glow-btn.danger:hover {
  background: #f00;
  color: #000;
  box-shadow: 0 0 16px #f00;
}
.panel-container {
  display: flex;
  gap: 2em;
  justify-content: space-between;
}

.panel-side {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 1em;
}

.panel-title {
  font-size: 1.4em;
  font-weight: bold;
  color: #0ff;
  margin-bottom: 0.5em;
  text-shadow: 0 0 8px #0ff8;
}


/*弹窗*/
/* 遮罩去除阻断点击 */
.dialog-overlay {
  position: fixed;
  inset: 0;
  background: transparent; /* 去掉半透明背景 */
  pointer-events: none; /* 让遮罩不阻挡事件 */
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9999;
}

/* 弹窗盒子能响应事件 */
.dialog-box {
  background: rgba(0, 40, 70, 0.95);
  padding: 2rem 2.5rem;
  border-radius: 12px;
  /* 去掉阴影 */
  /* box-shadow: none; */
  width: 320px;
  color: #0ff;
  font-family: "Orbitron", sans-serif;
  text-align: center;
  user-select: none;
  pointer-events: auto;
}

/* 其余样式保持不变 */

/* 标题 */
.dialog-box h3 {
  margin-bottom: 1rem;
  font-weight: 700;
  font-size: 1.5rem;
  text-shadow: 0 0 10px #0ff;
}

/* 文字 */
.dialog-box p {
  margin-bottom: 1.8rem;
  font-size: 1.15rem;
  line-height: 1.4;
}

/* 按钮容器 */
.dialog-actions {
  display: flex;
  gap: 1rem;
  justify-content: center;
}

/* 按钮基础样式 */
.btn {
  padding: 0.5rem 1.5rem;
  font-weight: 600;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.3s ease;
  border: 2px solid transparent;
  font-family: "Orbitron", sans-serif;
  text-transform: uppercase;
  user-select: none;
}

/* 确认按钮 */
.btn-confirm {
  background: #00ffcc;
  color: #003322;
  border-color: #00ffcc;
  box-shadow: 0 0 12px #00ffcc;
}

.btn-confirm:hover {
  background: #00d6a6;
  border-color: #00d6a6;
  box-shadow: 0 0 18px #00d6a6;
  color: #001f15;
}

/* 取消按钮 */
.btn-cancel {
  background: transparent;
  color: #0ff;
  border: 2px solid #0ff;
  box-shadow: 0 0 8px #0ff6;
}

.btn-cancel:hover {
  background: #0ff;
  color: #003333;
  box-shadow: 0 0 20px #0ff;
}

/* 淡入淡出动画 */
.fade-enter-active,
.fade-leave-active {
  transition: opacity 0.25s ease;
}

.fade-enter-from,
.fade-leave-to {
  opacity: 0;
}
</style>
